<template>
  <el-tabs type="border-card" v-model="chartName">
    <el-tab-pane label="全局年度编制统计柱状图" name="first">
      <div class="import-btn">
        <el-button type="primary" @click="downPdf('1', orgName)">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportYearExcel">
          导出excel
        </el-button>
        <el-button type="primary" @click="handlePrint('barChart1')">
          打印图表
        </el-button>
        <el-button type="primary" @click="updateYearData" v-show="false">
          更新数据
        </el-button>
      </div>
      <div
        class="barChart1"
        v-if="chartName === 'first'"
        style="width: 100%; height: 560px"
      >
        <img
          src=""
          id="barChart1"
          style="height: 450px; width: 100%; display: none"
        />
        <bar-echart ref="barChart1" :chartData="chartData2"></bar-echart>
      </div>
    </el-tab-pane>
    <el-tab-pane label="全局年度实配统计柱状图" name="second">
      <div class="import-btn">
        <el-button type="primary" @click="downPdf('2', orgName)">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportPersonYearExcel">
          导出excel
        </el-button>
        <el-button type="primary" @click="handlePrint('barChart2')">
          打印图表
        </el-button>
      </div>
      <div
        class="barChart2"
        v-if="chartName === 'second'"
        style="width: 100%; height: 560px"
      >
        <img
          src=""
          id="barChart2"
          style="height: 450px; width: 100%; display: none"
        />
        <PersonBarEchart
          ref="barChart2"
          :chartData="chartData"
        ></PersonBarEchart>
      </div>
    </el-tab-pane>
    <el-tab-pane label="全局年度编制统计折线图" name="line1">
      <div class="import-btn">
        <el-button type="primary" @click="downPdf('3', orgName)">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportYearExcel">
          导出excel
        </el-button>
        <el-button type="primary" @click="handlePrint('lineChart1')">
          打印图表
        </el-button>
      </div>
      <div
        class="lineChart1"
        v-if="chartName === 'line1'"
        style="width: 100%; height: 560px"
      >
        <img
          src=""
          id="lineChart1"
          style="height: 450px; width: 100%; display: none"
        />
        <line-echart ref="lineChart1" :chartData="chartData2"></line-echart>
      </div>
    </el-tab-pane>
    <el-tab-pane label="全局年度实配统计折线图" name="line2">
      <div class="import-btn">
        <el-button type="primary" @click="downPdf('4', orgName)">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportPersonYearExcel">
          导出excel
        </el-button>
        <el-button type="primary" @click="handlePrint('lineChart2')">
          打印图表
        </el-button>
      </div>
      <div
        class="lineChart2"
        v-if="chartName === 'line2'"
        style="width: 100%; height: 560px"
      >
        <img
          src=""
          id="lineChart2"
          style="height: 450px; width: 100%; display: none"
        />
        <PersonLineEChart
          ref="lineChart2"
          :chartData="chartData"
        ></PersonLineEChart>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import BarEchart from "./components/BarEChart.vue";
import PersonBarEchart from "./components/PersonBarEChart.vue";
import {
  queryYearBarEchartsData,
  saveYearData,
} from "@/api/overallchart/index.js";
import LineEchart from "./components/LineEChart.vue";
import PersonLineEChart from "./components/PersonLineEChart.vue";
import { getPdf } from "@/api/tool/getPdf.js";
import print from "print-js";
export default {
  components: {
    BarEchart,
    PersonBarEchart,
    LineEchart,
    PersonLineEChart,
  },
  data() {
    return {
      chartName: "first",
      chartData: {
        yData: [
          "2022年",
          "2021年",
          "2020年",
          "2019年",
          "2018年",
          "2017年",
          "2016年",
        ],
        yData1: [320, 302, 301, 334, 390, 330, 320],
        yData2: [120, 132, 101, 134, 90, 230, 210],
        yData3: [220, 182, 191, 234, 290, 330, 310],
        yData4: [150, 212, 201, 154, 190, 330, 410],
        yData5: [820, 832, 901, 934, 1290, 1330, 1320],
      },
      chartData2: {
        yData: [
          "2022年",
          "2021年",
          "2020年",
          "2019年",
          "2018年",
          "2017年",
          "2016年",
        ],
        yData1: [325, 302, 401, 334, 390, 330, 320],
        yData2: [125, 132, 101, 134, 30, 230, 210],
        yData3: [225, 182, 291, 234, 230, 330, 310],
        yData4: [155, 212, 201, 154, 190, 310, 210],
        yData5: [825, 832, 501, 934, 290, 1330, 1320],
      },
      orgId: localStorage.getItem("orgId"),
      orgName: localStorage.getItem("orgName"),
    };
  },
  created() {
    this.getData();
  },
  methods: {
    updateYearData() {
      saveYearData().then((res) => {});
    },
    getData() {
      queryYearBarEchartsData({ orgId: localStorage.getItem("orgId") }).then(
        (res) => {
          this.chartData = res.data;
          this.chartData2 = res.data;
        }
      );
    },
    exportYearExcel() {
      this.download(
        "org/exportYearExcel",
        {
          orgId: this.orgId,
        },
        this.orgName + `年度预设编制信息.xlsx`
      );
    },
    exportPersonYearExcel() {
      this.download(
        "org/exportPersonYearExcel",
        {
          orgId: this.orgId,
        },
        this.orgName + `年度实配人数信息.xlsx`
      );
    },
    downPdf(index, orgName) {
      if (index === "1") {
        this.downloadReprot(orgName + "年度数据柱状图", "barChart1");
      } else if (index === "2") {
        this.downloadReprot(orgName + "年度实配数据柱状图", "barChart2");
      } else if (index === "3") {
        this.downloadReprot(orgName + "年度数据折线图", "lineChart1");
      } else if (index === "4") {
        this.downloadReprot(orgName + "年度实配数据折线图", "lineChart2");
      }
    },
    downloadReprot(fileName, domName) {
      // 下载过程中进行锁屏
      const loading = this.$loading({
        lock: true,
        text: "请稍等,下载中.....",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getPdf(fileName, domName);
      // 关闭锁屏
      loading.close();
    },
    handlePrint(id) {
      console.log("d", id);
      if (id === "barChart1") {
        var barChartDataUrl = this.$refs.barChart1.barChartDataUrl;
      } else if (id === "barChart2") {
        var barChartDataUrl = this.$refs.barChart2.barChartDataUrl;
      } else if (id === "lineChart1") {
        var barChartDataUrl = this.$refs.lineChart1.barChartDataUrl;
      } else if (id === "lineChart2") {
        var barChartDataUrl = this.$refs.lineChart2.barChartDataUrl;
      }
      var printImgId = document.getElementById(id);
      printImgId.setAttribute("src", barChartDataUrl);
      document.getElementById(id).style.display = "block";
      let userAgent = navigator.userAgent;
      //判断是否Firefox浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        console.log("Firefox");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          header: "12321321",
          headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      //判断是否chorme浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        console.log("Chrome");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          header: "12321321",
          // headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      //判断是否IE浏览器
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        console.log("ActiveXObject");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          header: "12321321",
          headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      document.getElementById(id).style.display = "none";
    },
  },
};
</script>

<style>
</style>
